<template>
    <div id="progress-loop" ref="chartDom" style="width: 100%;height: 500px;"></div>
</template>
  
  <script setup lang="ts" name="dataScreen">
  import { watch,ref,onMounted, onBeforeUnmount, reactive, nextTick } from 'vue'
  import { debounce } from "@/utils";
  import * as echarts from 'echarts';
  const chartDom = ref();
  
  const props = defineProps({
   schedulingName: {
      type: Array,
      default: [],
    },
    teamData: {
      type: Array,
      default: [],
    }
  })
  let myChart = null;
        // 初始化数据
        let newData = {
            xAxis: ['DCS1001', 'DCS1002', 'DCS1003','DCS1004','DCS1005','DCS1006','DCS1007','DCS1008'],
            yAxis: props.teamData,
         }
         let legendData = [];
         let seriesData = [];
         let colorArr = ['#0BC2FB', '#FFB933', '#44C558', '#2F8FFF'];
         legendData = newData.yAxis.map((item) => item.name);
         seriesData = newData.yAxis.map((item1, index1) => {
            return {
               name: item1.name,
               type: 'bar',
               barWidth: 15,
               silent: true,
               itemStyle: {
                  normal: {
                     color: colorArr[index1],
                     barBorderRadius: [0, 30, 30, 0],
                  },
               },
               data: item1.value,
            }
         })
         
    const Option = computed(() => {
      return {
            grid: {
               containLabel: true,
               bottom: '5%',
               top: '1%',
               left: '0%',
               right: '0%',
            },
            tooltip: {
               trigger: 'axis',
               axisPointer: {
                  type: 'shadow',
               },
              
            },
            legend: {
               orient: 'horizontal',
               bottom:'-2%',
               data: legendData,
               itemWidth: 15,
               itemHeight: 15,
               itemGap: 40,
               icon: "rect",
               textStyle: {
                  fontSize: 18,
                  color: '#fff',
                  padding: [5, 0, 0, 2],
                  rich: {
                     a: {
                        verticalAlign: 'middle',
                     },
                  },
               },
         
            },
            yAxis: {
               triggerEvent: true,
               data: props.schedulingName,
               axisLabel: {
                  show: true,
                  fontSize: 14,
                  color: '#fff',
                  // align: 'center',
                  // verticalAlign: 'top',
               },
               axisLine: {
                  show: false,
               },
               axisTick: {
                  show: true,
                  lineStyle: {
                     show: true,
                     color: '#0B3561',
                     width: 2,
                  },
               },
            },
            xAxis: [
               {
                type:'value',
                scale:true,
                max: 6000,
                  axisLabel: {
                    show:false,
                  },
                  axisLine: {
                     show: false,
                  },
                  axisTick: {
                     show: false,
                  },
                  splitLine: {
                    show:false,
                  },
               },
            ],
            series: seriesData,
         }
    })
    const initChart = () => {
      myChart.setOption(Option.value);
    };
    const resizeChart = () => {
      myChart.resize();
      initChart()
    };
    const resizeHandler = debounce(resizeChart, 100);
    onMounted(() => {
      nextTick(() => {
        myChart = echarts.init(chartDom.value);
        initChart();
      });
      window.addEventListener("resize", resizeHandler);
    });
    onBeforeUnmount(() => {
      window.removeEventListener("resize", resizeHandler);
      myChart.dispose();
    });
  </script>
  